<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
    <el-row>
      <el-col :span="10">
        <el-form-item label="任务名称 ：">
          <el-input v-model="ruleForm.jobName"></el-input>
        </el-form-item>
        <br />

        <span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;数据来源</span>
        <br />
        <br />

        <el-form-item label="数据源地址：">
          <el-input v-model="ruleForm.sourceDatasourceIp"></el-input>
        </el-form-item>
        <el-form-item label="数据源端口：">
          <el-input v-model="ruleForm.sourceDatasourcePort"></el-input>
        </el-form-item>
        <el-form-item label="数据源accessKey：">
          <el-input v-model="ruleForm.sourceDatasourceAccessKey"></el-input>
        </el-form-item>
        <el-form-item label="数据源secretKey：">
          <el-input v-model="ruleForm.sourceDatasourceSecretKey"></el-input>
        </el-form-item>
        <el-form-item label="数据源桶名称">
          <el-input v-model="ruleForm.sourceDatasourceBucket"></el-input>
        </el-form-item>
        <el-form-item label="目录：">
          <el-cascader ref="cascader" v-model="ruleForm.directoryId" :options="options" :props="treeProps" :show-all-levels="false" change-on-select clearable style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="任务描述 ：">
          <el-input v-model="ruleForm.description"></el-input>
        </el-form-item>
        <br />

        <span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;数据去向</span>
        <br />
        <br />
        <el-form-item label="目标源地址">
          <el-input v-model="ruleForm.targetDatasourceIp"></el-input>
        </el-form-item>
        <el-form-item label="目标源端口">
          <el-input v-model="ruleForm.targetDatasourcePort"></el-input>
        </el-form-item>
        <el-form-item label="目标源accessKey">
          <el-input v-model="ruleForm.targetDatasourceAccessKey"></el-input>
        </el-form-item>
        <el-form-item label="目标源secretKey">
          <el-input v-model="ruleForm.targetDatasourceSecretKey"></el-input>
        </el-form-item>
        <el-form-item label="数据源桶名称">
          <el-input v-model="ruleForm.targetDatasourceBucket"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button v-if="codeShow" type="primary" @click="submitForm('ruleForm')">{{ this.editdata.addroedit == 'edit' ? '确认修改' : '立即创建' }}</el-button>
      <el-button v-if="!codeShow" type="primary" @click="codeFun">测试连通</el-button>
      <el-button @click="resetForm">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { alinkDetail, addkDetail, updateDetail } from '@/api/masterdata/modelmasterdataDirectory.js'

export default {
  props: ['editdata', 'options'],
  data() {
    return {
      codeShow: false,
      code: '',
      treeProps: {
        value: 'id',
        label: 'name',
        checkStrictly: true,
      },
      ruleForm: {
        jobName: '',
        description: '',
        directoryId: [],
        sourceDatasourceIp: undefined,
        sourceDatasourcePort: undefined,
        sourceDatasourceAccessKey: undefined,
        sourceDatasourceSecretKey: undefined,
        sourceDatasourceBucket: undefined,
        targetDatasourceIp: undefined,
        targetDatasourcePort: undefined,
        targetDatasourceAccessKey: undefined,
        targetDatasourceSecretKey: undefined,
        targetDatasourceBucket: undefined,
      },
      rules: {},
    }
  },
  watch: {
    ruleForm: {
      deep: true,
      handler: function (newval, oldval) {
        if (newval) {
          this.codeShow = false
        }
      },
    },
  },
  mounted() {
    console.log(this.editdata, 'editdata')
    console.log(this.options, 'options')
    if (this.editdata.addroedit == 'edit') {
      this.ruleForm = this.editdata
    }
  },
  methods: {
    codeFun() {
      if (this.$refs.cascader.getCheckedNodes()[0] !== undefined) {
        this.ruleForm.directoryId = this.$refs.cascader.getCheckedNodes()[0].value
      }

      alinkDetail(this.ruleForm).then((res) => {
        this.code = res.data.code
        if (this.code == 0) {
          this.codeShow = true
          this.$message({
            type: 'success', // success error warning
            message: '测试连通成功',
            duration: 2000,
          })
        } else {
          this.$message({
            type: 'error', // success error warning
            message: res.data.msg,
            duration: 2000,
          })
          this.codeShow = false
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$refs.cascader.getCheckedNodes()[0] !== undefined) {
            this.ruleForm.directoryId = this.$refs.cascader.getCheckedNodes()[0].value
          }
          if (this.editdata.addroedit == 'edit') {
            updateDetail(this.ruleForm).then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  type: 'success', // success error warning
                  message: '修改成功',
                  duration: 2000,
                })
                this.errorCange()
              }
            })
          } else if (this.editdata.addroedit == 'add') {
            addkDetail(this.ruleForm).then((res) => {
              if (res.data.code == 0) {
                this.$message({
                  type: 'success', // success error warning
                  message: '新增成功',
                  duration: 2000,
                })
                this.errorCange()
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.errorCange()
    },
    errorCange() {
      this.ruleForm = {
        jobName: '',
        description: '',
        directoryId: '',
        sourceDatasourceIp: undefined,
        sourceDatasourcePort: undefined,
        sourceDatasourceAccessKey: undefined,
        sourceDatasourceSecretKey: undefined,
        sourceDatasourceBucket: undefined,
        targetDatasourceIp: undefined,
        targetDatasourcePort: undefined,
        targetDatasourceAccessKey: undefined,
        targetDatasourceSecretKey: undefined,
        targetDatasourceBucket: undefined,
      }
      this.$emit('change')
    },
  },
}
</script>
<style></style>
